<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<html>
<head>
    <title>注册</title>
    <link type="text/css" rel="stylesheet" href="css/layui.css">
    <script type="text/javascript" src="js/layui.js"></script>
</head>
<body>
    <jsp:include page="header.jsp"></jsp:include>
    <style>
      .demo-reg-container{width: 320px; margin: 21px auto 0;}
      .demo-reg-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
      .container{
          background-image: url("images/LoginImg22.png"),url("images/LoginImg33.png");
          background-position: 0 100%,100% 100%;
          background-repeat: no-repeat,no-repeat;
          background-size: 25%;
          width: 70%;
          border-radius: 20px;
          box-shadow: 0 0 10px 2px #0c0c0c;
      }
      .main{
          margin: auto;
          display: flex;
          justify-content: center;
          margin-top: 10vh;
      }
    </style>
    <div class="main">
        <div class="container">
            <form class="layui-form" action="/videoweb/UserRegisterServlet" method="POST" >
                <c:if test="${!empty msg }">
                    <h2 style="text-align: center;color: #ff5722";>${msg }</h2>
                </c:if>
              <div class="demo-reg-container">
                <div class="layui-form-item">
                  <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                      <i class="layui-icon layui-icon-username"></i>
                    </div>
                    <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" autocomplete="off" class="layui-input" lay-affix="clear">
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                      <i class="layui-icon layui-icon-password"></i>
                    </div>
                    <input type="password" name="password" value="" lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye">
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                      <i class="layui-icon layui-icon-password"></i>
                    </div>
                    <input type="password" name="confirmPassword" value="" lay-verify="required|confirmPassword" placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye">
                  </div>
                </div>
                <div class="layui-form-item">
                  <input type="checkbox" name="agreement" lay-verify="required" lay-skin="primary" title="同意">
                  <a target="_blank" style="position: relative; top: 6px; left: -15px;" onclick="alert('用户协议')" >
                    <ins>用户协议</ins>
                  </a>
                </div>
                <div class="layui-form-item">
                  <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-reg">注册</button>
                </div>
                <div class="layui-form-item demo-reg-other">
                  <label>社交账号注册</label>
                  <span style="padding: 0 21px 0 6px;">
                <a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
                <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
                <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
              </span>
                  <a href="user_login.jsp">登录已有帐号</a></span>
                </div>
              </div>
            </form>
        </div>
    </div>
    <script>
      layui.use(function(){
        var $ = layui.$;
        var form = layui.form;
        var layer = layui.layer;
        var pwdjs = document.getElementsByName("password")[0];
        var cpwdjs = document.getElementsByName("confirmPassword")[0];
        var container = document.getElementsByClassName("container")[0];

        pwdjs.onfocus = function (){
            container.style.backgroundImage="url('images/22_close.png'),url('images/33_close.png')";
        }
        pwdjs.onblur = ()=>{
            container.style.backgroundImage="url('images/LoginImg22.png'),url('images/LoginImg33.png')";
        }
        cpwdjs.onfocus = function (){
            container.style.backgroundImage="url('images/22_close.png'),url('images/33_close.png')";
        }
        cpwdjs.onblur = ()=>{
            container.style.backgroundImage="url('images/LoginImg22.png'),url('images/LoginImg33.png')";
        }

        // 自定义验证规则
        form.verify({
          // 确认密码
          confirmPassword: function(value, item){
            var passwordValue = $('#reg-password').val();
            if(value !== passwordValue){
              return '两次密码输入不一致';
            }
          }
        });

        // 提交事件
        form.on('submit(demo-reg)', function(data){
          // var field = data.field; // 获取表单字段值

          // 是否勾选同意
          if(!field.agreement){
            layer.msg('您必须勾选同意用户协议才能注册');
            return false;
          }

          // 显示填写结果，仅作演示用
          // layer.alert(JSON.stringify(field), {
          //   title: '当前填写的字段值'
          // });

          // 此处可执行 Ajax 等操作
          // …

          // return false; // 阻止默认 form 跳转
        });
      });
    </script>
</body>
</html>
